<!--
 * @Author: chenhuanhuan 2925102113@qq.com
 * @Date: 2024-12-11 14:32:10
 * @LastEditors: chenhuanhuan 2925102113@qq.com
 * @LastEditTime: 2025-02-13 14:25:26
 * @FilePath: \hbzc-groupmeal-center-web\src\Public-UIlibrary\pb-card\index.vue
-->
<template>
  <div :style="pbStyle">
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import { defineProps, withDefaults } from "vue";
/**
 * @param padding  内边距
 * @param color    背景色
 * @param width    card的宽度
 * @param height   card的高度
 * @param radius   card的radius
 */
const props = defineProps({
  padding: {
    type: [String],
    default: "16px",
  },
  color: {
    type: [String],
    default: "#fff",
  },
  width: {
    type: [String],
    default: 'auto',
  },
  height: {
    type: [String],
    default: 'auto',
  },
  radius: {
    type: [Number],
    default: 4,
  },
});

const pbStyle = computed(() => {
  return `box-sizing:border-box;padding:${props.padding};border-radius: ${props.radius}px;background:${props.color};width:${props.width};height:${props.height}`;
})




</script>

<style lang="scss" scoped></style>